<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>追溯码识别页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.9.2/dist/css/layui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui@2.9.2/dist/layui.js"></script>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            box-sizing: border-box;
        }

        .section {
            margin: 10px;
            padding: 10px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        /* 表格区域 */
        .table-wrapper {
            display: flex;
            gap: 10px;
        }

        .table-container {
            flex: 1;
            height: 360px;
            overflow: auto;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        /* 底部栏固定 */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #e6e6e6;
            padding: 10px;
            text-align: right;
            z-index: 10;
        }
    </style>
</head>

<body>
    <!-- 填写基本信息 -->
    <div class="section">
        <fieldset class="layui-elem-field">
            <legend>填写基本信息</legend>
            <div class="layui-form">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">单据类型:</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">单据号:</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">进入时间:</label>
                        <div class="layui-input-block">
                            <input type="date" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">进入时间:</label>
                        <div class="layui-input-block">
                            <input type="date" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <!-- 添加追溯码 -->
    <div class="section">
        <fieldset class="layui-elem-field">
            <legend>添加追溯码</legend>
            <div>
                <input type="text" placeholder="输入追溯码" class="layui-input layui-input-inline" style="width: 80%;">
                <button class="layui-btn layui-btn-normal">确定</button>
            </div>
        </fieldset>
    </div>

    <!-- 表格区域 -->
    <div class="section table-wrapper">
        <!-- 追溯码识别记录表格 -->
        <div class="table-container">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this" id="tab-all">全部 <span id="all-count">(2)</span></li>
                    <li id="tab-failed">仅看失败 <span id="failed-count">(1)</span></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                    <div style="padding: 5px;">
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>

                    <script type="text/html" id="toolDemo">
                      <div class="layui-clear-space">
                        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
                      </div>
                    </script>
                    </div>
                    <div class="layui-tab-item">内容-3</div>
                </div>
            </div>
        </div>

        <!-- 按药品统计表格 -->
        <div class="table-container">
            <table class="layui-table" lay-size="sm">
                <thead>
                    <tr>
                        <th class="fixed-column">药品通用名</th>
                        <th>数量</th>
                        <th>剂型</th>
                        <th>包装规格</th>
                        <th class="fixed-action">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fixed-column">丁酸氯化钠软膏</td>
                        <td>1</td>
                        <td>乳膏剂</td>
                        <td>25克/盒</td>
                        <td class="fixed-action">
                            <button class="layui-btn layui-btn-sm layui-btn-normal">查看</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
        <button class="layui-btn layui-btn-primary">取消</button>
        <button class="layui-btn layui-btn-normal">提交并继续</button>
    </div>

    <script>
        var json = '/demo1.json';
        
        console.log('11', json);
         
        layui.use(function () {
            var element = layui.element;
            // hash 地址定位
            var hashName = 'tabid'; // hash 名称
            var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值

            // 初始切换
            element.tabChange('test-hash', layid);
            // 切换事件
            element.on('tab(test-hash)', function (obj) {
                location.hash = hashName + '=' + this.getAttribute('lay-id');
            });
        });

        layui.use(['table'],function(){
            var table = layui.table;
            table.render({
                elem:'#test',
                height:250,
                url: json,
                cellMinWidth: 80,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', fixed: 'left',title: '追溯码', sort: true },
                    { field: 'username', width: 80, title: '级别' },
                    { field: 'sex', width: 120, title: '状态' },
                    { fixed: 'right', title: '操作', width: 60, minWidth: 40, templet: '#toolDemo' }
                ]],
                done: function () {
                    var id = this.id;
                },
                
                error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 触发单元格工具事件
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                // console.log(obj)
                if (obj.event === 'delete') {
                    // layer.open({
                    //     title: '编辑 - id:' + data.id,
                    //     type: 1,
                    //     area: ['80%', '80%'],
                    //     content: '<div style="padding: 16px;">自定义表单元素</div>'
                    // });
                    layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                        obj.del(); // 删除对应行（tr）的DOM结构
                        layer.close(index);
                        // 向服务端发送删除指令
                    });
                }
            });

            //inst.resize(); // 对当前表格重新适配尺寸
            //inst.setColsWidth() // 对当前表格重新分配列宽

        });
    </script>
</body>

</html>